import React from 'react'
import { Outlet } from 'react-router-dom'
import {
  FundOutlined,
  HomeOutlined,
  MenuFoldOutlined,
  UserOutlined,
  LogoutOutlined,
  CaretDownFilled
} from '@ant-design/icons';
import {  Menu, Avatar, Dropdown } from 'antd';
import './css/App.css'
import {useNavigate} from 'react-router-dom'

const items = [
  {
    key: '1',
    label: '数据看板',
    icon: <FundOutlined />,
    children: [
      {
        key: '1-1',
        label: 'GIS地图',
        path: ''
      },
      {
        key: '1-2',
        label: '公厕看板',
        path: ''
      }
    ],
  },
  {
    key: '2',
    label: '公厕管理',
    icon: <HomeOutlined />,
    children: [
      {
        key: '2-1',
        label: '公厕基础信息',
        path: '/statusinfo'
      },
      {
        key: '2-2',
        label: '问题反馈列表',
        path: '/problemfeedback'
      },
      {
        key: '2-3',
        label: '公厕评价记录',
        path: '/comment'
      }
    ],
  },
  {
    key: '3',
    label: '运营管理',
    icon: <UserOutlined />,
    children: [
      {
        key: '3-1',
        label: '组织管理',
        path: ''
      },
      {
        key: '3-2',
        label: '人员管理',
        path: ''
      },
      {
        key: '3-3',
        label: '排班管理',
        path: ''
      }
    ],
  }
];




export default function App() {

  // const [collapsed, setCollapsed] = useState(false);

  const navigate=useNavigate()

  let path= window.location.pathname

  let keys=['1-1']

  const setSelectedKeys = () => {
    if (path === '/') {
      return
    } else {
      items.forEach((ele)=>{
        ele.children.forEach((item)=>{
          if (item.path === path) {
            keys = [item.key]
          }
        })
      })
    }
  }

  setSelectedKeys()

  const ele = [
    {
      key: '1',
      icon: <LogoutOutlined />,
      label: '退出登录',
    }
  ];

  const clickHandler = (item, key, keyPath, domEvent) => {
    let obj
    items.forEach((ele) => {
      if(ele.key===item.keyPath[1]){
        obj=ele.children
      }
    })
    obj.forEach((ele)=>{
      if(ele.key===item.keyPath[0]){
        path=ele.path
        navigate(ele.path)
      }
    })
    
  }

  const selectHander = (item, key, keyPath, selectedKeys, domEvent) => {
    // console.log(item, key, keyPath, selectedKeys, domEvent);
  }

  return (
    <div style={{ display: 'flex', width: '100vw', height: '100vh' }}>

      <div
        style={{
          width: '13vw',
        }}
      >
        <div
          type="primary"
          style={{
            width: '13vw',
            height: '10vh',
            textAlign: 'center',
            backgroundColor: '#215476',
            color: 'white',
            fontSize: '1.5vw',
            lineHeight: '10vh'
          }}
        >
          数智公厕LOGO
        </div>
        <Menu
          defaultSelectedKeys={keys}
          defaultOpenKeys={['1', '2', '3']}
          mode="inline"
          theme="dark"
          inlineCollapsed={false}
          items={items}
          style={{
            height: '90vh',
            fontSize: '0.9vw'
          }}
          onClick={(item, key, keyPath, domEvent) => { clickHandler(item, key, keyPath, domEvent) }}
          onSelect={(item, key, keyPath, selectedKeys, domEvent) => { selectHander(item, key, keyPath, selectedKeys, domEvent) }}
        />
      </div>

      <div>
        <div className='header'>
          <div>
            <MenuFoldOutlined />数智公厕系统
          </div>

          <div>

            <Dropdown
              menu={{ items: ele }}
              placement="bottom"
              trigger={['click']}
              arrow
            >
              <div style={{ fontSize: '1.3vw',userSelect: 'none',cursor: 'pointer' }}>
                <Avatar size={40} src='https://n.sinaimg.cn/sinakd20116/96/w2048h2048/20240323/24a7-52a54c327350fe430e27f8b5847a0bf5.jpg' />
                <span style={{ marginLeft: '10px' }}>Admin</span>
                <CaretDownFilled />
              </div>
            </Dropdown>


          </div>
        </div>

        <div className='main'>
          <Outlet></Outlet>
        </div>
      </div>
    </div>
  )
}
